<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-family: SimSun;
        }
        html {
            border-top: 3px solid #B8001F;
            background: #EEEEEE;
        }
        .banxin {
            width: 951px;
            margin: 0 auto;
            height: auto;
            font-size: 12px;
            background: #fff;
        }
        .nav-img {
            width: 100%;
        }
        .title-img {
            width: 100%;
            margin-top: 10px;
        }
        .box {
            width: 100%;
            height: 420px;
            background: #ffffff;
            position: relative;
        }
        .left {
            width: 180px;
            text-align: right;
            display: inline-block;
            margin-top: 44px;
        }
        .left span {
            display: block;
        }
        .left span::before {
            content: "*";
            color: red;
        }
        .center {
            position: absolute;
            left: 188px;
            top: 44px;
            display: inline-block;
            width: 515px;
        }
        .center input,
        .center select {
            display: block;
        }
        .right-img {
            width: 240px;
            position: absolute;
            right: 0;
            top: 10px;
        }
        .bottom {
            position: absolute;
            left: 200px;
            top: 300px;
        }
        .kuangkuang {
            display: inline-block;
            width: 8px;
            height: 8px;
            line-height: 6px;
            text-align: left;
            border: 1px solid #9e9e9e;
            margin-right: 6px;
            color: blue;
            font-weight: 800;
        }
        .name {
            height: 30px;
            line-height: 30px;
        }
        .inputName {
            width: 100%;
            height: 24px;
            margin-bottom: 4px;
        }
        .yanzhengfangshi {
            height: 32px;
            line-height: 32px;
        }
        .yanzhengfangshi2 {
            height: 36px;
            line-height: 36px;
        }
        .yzfsgou {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            border: 1px solid #999;
            margin-right: 3px;
        }
        .yzfsgou.check {
            background-image:linear-gradient(135deg, blue 100px, #fff 200px);
            border: 1px solid blue;
        }
        .yzfsgou2 {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            border: 1px solid #999;
            margin-right: 10px;
        }
        .yzfsgou2.check {
            background-image:linear-gradient(135deg, blue 100px, #fff 200px);
            border: 1px solid blue;
        }
        .yzfszi {
            margin-right: 36px;
        }
        .yzfs .ziliao {
            display: inline-block;
        }
        .cailiao {
            height: 36px;
            line-height: 36px;
        }
        .yzfs-ziliao {
            height: 36px;
            line-height: 36px;
        }
        .liulan {
            width: 46px;
            height: 20px;
            line-height: 20px;
            color: dodgerblue;
            position: relative;
            left: -3px;
        }
        .uploadsuccess {
            margin-left: 10px;
            margin-right: 10px;
            color: red;
            font-weight: 800;
            display: none;
        }
        .sureupload {
            width: 270px;
            height: 30px;
            background: blue;
            line-height: 31px;
            text-align: center;
            font-size: 16px;
            font-weight: 800;
        }
        .login {
            position: absolute;
            top: 4px;
            left: 463px;
        }
        .guanlizhongxin {
            position: absolute;
            top: 184px;
            left: 177px;
            background: #fff;
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<script src="jquery.js"></script>
<body>
    <div class="banxin" style="position: relative">
        <div class="login">
            <span>您好：</span><span style="text-decoration: underline;">美借后台资信管理部</span><span style="color: blue;text-decoration: underline;margin-left: 16px">注销</span>
        </div>
        <span class="guanlizhongxin">美借后端征信管理中心</span>
        <img class="nav-img" src="./images/nav.png" alt=""/>
        <img class="title-img" src="./images/title.png" alt=""/>
        <div class="box">
            <div class="left">
                <span class="name">姓名:</span>
                <span class="name">证件类型:</span>
                <span class="name">证件号:</span>
                <span class="yanzhengfangshi">身份证验证方式:</span>
                <span class="cailiao" style="margin-top: 6px">信审案件材料:</span>
                <span class="cailiao">备案:</span>
            </div>
            <div class="center">
                <input class="inputName" style="margin-top: 4px" type="text" placeholder="请输入您的姓名"/>
                <select class="inputName">
                    <option value="身份证">身份证</option>
                    <option value="居住证">居住证</option>
                    <option value="签证">签证</option>
                    <option value="护照">护照</option>
                    <option value="军人证">军人证</option>
                    <option value="党员证">党员证</option>
                </select>
                <input class="inputName" type="text" placeholder="请输入您的证件号"/>
                <div class="yzfs yanzhengfangshi2">
                    <span class="yzfsgou" style="margin-left: 6px"></span><span class="yzfszi">数字证书验证</span>
                    <span class="yzfsgou"></span><span class="yzfszi">问题验证</span>
                    <span class="yzfsgou"></span><span class="yzfszi">其他验证方式</span>
                </div>
                <div class="yzfs yzfs-ziliao" style="margin-top: 4px">
                    <input type="text" class="ziliao"/>
                    <input type="text" class="ziliao liulan" readonly="readonly" value="浏览..."/>
                    <span class="uploadsuccess">上传成功!</span>
                    <span class="yzfsgou2"></span><span>一并移交至公安网</span>
                </div>
                <div class="yzfs yzfs-ziliao">
                    <input type="text" class="ziliao"/>
                    <input type="text" class="ziliao liulan" readonly="readonly" value="浏览..."/>
                    <span class="uploadsuccess">上传成功!</span>
                </div>

            </div>
            <div class="bottom">
                <div class="sureupload">确认上传</div>
                <div style="margin-top: 20px;font-size: 10px">
                    <span class="kuangkuang"></span><span>我已阅读并同意信审条例</span>
                </div>
                <div style="margin-top: 6px;font-size: 10px">
                    <span class="kuangkuang"></span><span>根据合同协议履行法律义务</span>
                </div>
            </div>
            <img class="right-img" src="./images/right.png" alt=""/>
        </div>
    </div>
</body>
<script>
    $('.yzfsgou').on('click',function(){
        $('.yzfsgou').each(function (i,v) {
            $(v).removeClass('check');
        });
        $(this).toggleClass('check');
    });

    $('.yzfsgou2').on('click',function(){
        $(this).toggleClass('check');
    })

</script>
</html>